<template>
    <div class="header-bar" :class="props.isFixHeaderBar ? 'slide-down' : ''">
        <!-- 左边 -->
        <div class="left-entry">
            <div class="entry-title" v-if="isFixHeaderBar" @mouseenter="isOpen = true" @mouseleave="isOpen = false"
                @click="$router.push('/')">
                <picture class="logo">
                    <img src="../../assets/img/liuhaha-pink.png" alt="">
                </picture>
                <span>首页</span>
                <i class="iconfont icon-xiajiantou" :class="isOpen ? 'arrow-down' : ''"></i>
            </div>
            <div class="entry-title" v-else @click="$router.push('/')">
                <i class="iconfont icon-dsj"></i>
                <span>首页</span>
            </div>
            <div class="default-entry" @click="noPage">
                <span>番剧</span>
            </div>
            <div class="default-entry" @click="noPage">
                <span>漫画</span>
            </div>
            <div class="default-entry" @click="noPage">
                <span>直播</span>
            </div>
            <div class="default-entry" @click="noPage">
                <span>游戏中心</span>
            </div>
            <div class="default-entry" @click="noPage">
                <span>会员购</span>
            </div>
            <div class="download-entry" @click="noPage" v-if="!isFixHeaderBar">
                <i class="iconfont icon-a-download"></i>
                <span>下载客户端</span>
            </div>
        </div>
        <!-- 中间 -->
        <div class="center-search-container" :style="props.isShowSearchInput ? '' : 'display: none;'">
            <div class="center-search__bar" :class="isSearchPopShow ? 'is-focus' : ''">
                <!-- 输入框 -->
                <div id="nav-searchform" :class="isSearchPopShow ? 'nav-searchform-active' : ''" ref="searchForm">
                    <div class="nav-search-content">
                        <el-input class="nav-search-input" :class="isSearchPopShow ? 'nav-search-input-active' : ''"
                            v-model="searchInput" placeholder="请输入搜索内容" @focus="searchPopShow()"
                            @keyup.enter="goSearch"></el-input>
                    </div>
                    <div class="nav-search-clean" :style="searchInput == '' ? 'display: none;' : ''"
                        @click.stop="searchInput = ''">
                        <el-icon size="16">
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                    <div class="nav-search-btn" @click="goSearch">
                        <i class="iconfont icon-sousuo"></i>
                    </div>
                </div>
                <!-- 旗袍框 -->
                <div class="search-panel" :style="isSearchPopShow ? '' : 'display: none;'" ref="searchPop">
                    <div class="history" v-if="searchInput == ''">
                        <div class="history-header">
                            <div class="title">搜索历史</div>
                            <div class="clear" @click.stop="removeAllHistories">清空</div>
                        </div>
                        <div class="histories-wrap" :style="isHistoryOpen ? 'max-height: 171px;' : 'max-height: 91px;'">
                            <div class="histories">
                                <div class="history-item" v-for="(item, index) in histories" :key="index">
                                    <div class="history-text" @click.stop="clickItemToSearch(item)">
                                        {{ item }}
                                    </div>
                                    <div class="close" @click.stop="removeHistory(index)">
                                        <i class="iconfont icon-close"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="history-fold" v-if="isHistoryOpen" @click.stop="isHistoryOpen = false;">
                            <div class="fold-text">收起</div>
                            <i class="iconfont icon-xiajiantou" style="transform: rotate(180deg); /* 旋转 180 度 */"></i>
                        </div>
                        <div class="history-fold" v-else @click.stop="isHistoryOpen = true;">
                            <div class="fold-text">展开更多</div>
                            <i class="iconfont icon-xiajiantou"></i>
                        </div>
                    </div>
                    <div class="trending" v-if="searchInput == ''">
                        <div class="header">
                            <div class="title" style="margin-left: 15px;">热搜</div>
                        </div>
                        <div class="trendings-double" style="max-width: 300px;">
                            <div class="trendings-col" style="max-width: calc(100% + 161px);">
                                <div class="trending-item" v-for="(item, index) in $store.state.trendings" :key="index">
                                    <div class="trending-wrap" @click.stop="clickItemToSearch(item.content)">
                                        <div class="trendings-rank" :class="index < 3 ? 'topThree' : ''">{{ index + 1 }}
                                        </div>
                                        <div class="trendings-text">{{ item.content }}</div>
                                        <img src="../../assets/img/icon_new.png" alt="" class="trending-mark"
                                            v-if="item.type === 1">
                                        <img src="../../assets/img/icon_hot.png" alt="" class="trending-mark"
                                            v-if="item.type === 2">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="right-entry">
            <!-- 未登录状态 -->
            <div class="header-avatar-wrap" v-if="!isLogin">
                <div class="default-login" @click="dialogVisible = true;">
                    登录
                </div>
            </div>
            <!-- 登录后显示头像 -->
            <div v-else class="header-avatar-wrap" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                <a :href="`/space/${user.uid}`" target="_blank" class="header-avatar-wrap--container mini-avatar--small"
                    style="\">
                    <picture class="v-img">
                        <img :src="user.avatar" :alt="`${user.nickname}的头像`" />
                    </picture>
                </a>
                <div class="v-popover to-bottom">
                    <div class="avatar-panel-popover" :class="isPopoverShow ? 'popShow' : 'popHide'"
                        :style="{ display: popoverDisplay }">
                        <a :href="`/space/${user.uid}`" target="_blank" class="nickname"
                            :class="user.vip !== 0 ? 'vip-name' : ''">
                            <span>{{ user.nickname }}</span>
                        </a>
                        <div class="vip-level-tag">
                            <div class="vip-tag" v-if="user.vip !== 0">
                                {{ user.vip === 1 ? '月度' : user.vip === 2 ? '季度' : '年度' }}大会员
                            </div>
                            <div class="gender female" v-if="user.gender == 0"><el-icon size="12">
                                    <Female />
                                </el-icon></div>
                            <div class="gender male" v-if="user.gender == 1"><el-icon size="12">
                                    <Male />
                                </el-icon></div>
                        </div>
                        <div class="coins">
                            <span class="coins-text">硬币: </span>
                            <span class="coins-num">{{ user.coin }}</span>
                        </div>
                        <div class="counts">
                            <a :href="`/space/${user.uid}/fans/follow`" target="_blank" class="counts-item">
                                <div class="count-num">{{ handleNum(2) }}</div>
                                <div class="count-text">关注</div>
                            </a>
                            <a :href="`/space/${user.uid}/fans/fans`" target="_blank" class="counts-item">
                                <div class="count-num">{{ handleNum(1000000) }}</div>
                                <div class="count-text">粉丝</div>
                            </a>
                            <a :href="`/space/${user.uid}/dynamic`" target="_blank" class="counts-item">
                                <div class="count-num">{{ handleNum(0) }}</div>
                                <div class="count-text">动态</div>
                            </a>
                        </div>
                        <div class="single-item middle" @click="openNewPage('/account')">
                            <div class="single-item-left">
                                <el-icon size="16">
                                    <User />
                                </el-icon>
                                <span>个人中心</span>
                            </div>
                            <el-icon>
                                <ArrowRightBold />
                            </el-icon>
                        </div>
                        <div class="placeholder"></div>
                        <div class="single-item logout" @click="logout">
                            <el-icon size="16">
                                <CircleClose />
                            </el-icon>
                            <span>退出登录</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-entry-item">
                <div class="right-entry--outside"
                    @click="$store.state.isLogin ? openNewPage('/bigvip') : dialogVisible = true;">
                    <i class="iconfont icon-wodedahuiyuan"></i>
                    <span>大会员</span>
                </div>
            </div>
            <div class="right-entry-item">
                <div class="right-entry--outside"
                    @click="$store.state.isLogin ? openNewPage('/message') : dialogVisible = true;">
                    <i class="iconfont icon-xinfeng"></i>
                    <span>消息</span>
                </div>
            </div>
            <div class="right-entry-item">
                <div class="right-entry--outside"
                    @click="$store.state.isLogin ? openNewPage('/dynamics') : dialogVisible = true;">
                    <i class="iconfont icon-fengche"></i>
                    <span>动态</span>
                </div>
            </div>
            <div class="right-entry-item">
                <div class="right-entry--outside"
                    @click="$store.state.isLogin ? openNewPage('/star') : dialogVisible = true;">
                    <i class="iconfont icon-biaoqianA01_shoucang-78"></i>
                    <span>收藏</span>
                </div>
            </div>
            <div class="right-entry-item">
                <div class="right-entry--outside"
                    @click="$store.state.isLogin ? openNewPage('/history') : dialogVisible = true;">
                    <i class="iconfont icon-shouye"></i>
                    <span>历史</span>
                </div>
            </div>
            <div class="right-entry-item">
                <div class="right-entry--outside"
                    @click="$store.state.isLogin ? openNewPage('/platform') : dialogVisible = true;">
                    <i class="iconfont icon-dengpao"></i>
                    <span>创作中心</span>
                </div>
            </div>
            <div class="right-entry-item right-entry-item--upload"
                @click="$store.state.isLogin ? openNewPage('/platform/upload') : dialogVisible = true;">
                <div class="upload-buttom">
                    <i class="iconfont icon-shangchuan"></i>
                    <span>投稿</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录框 -->
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" destroy-on-close align-center>
        <LoginRegister @loginSuccess="dialogVisible = false;"></LoginRegister>
    </el-dialog>
    
</template>

<script setup name="HeaderBar">
import { ref, reactive, onMounted, onUnmounted, watch, computed, onBeforeUnmount } from 'vue';
import { defineComponent } from 'vue';
import { handleNum, highlightKeyword } from '@/utils/utils.js';
import { getCount } from '@/api/follow';
import { ElMessage } from 'element-plus';
import LoginRegister from '@/components/loginRegister/LoginRegister.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();

const isOpen = ref(false);

const user = computed(() => {
    return store.state.user;
});


const isLogin = computed(() => { return store.state.isLogin });

// // 在页面刷新时将vuex里的信息保存到sessionStorage里
// window.addEventListener('beforeunload', () => {
//     sessionStorage.setItem('store', JSON.stringify(store.state))
// })

// // 在离开当前页面时保存状态信息到sessionStorage里
// onBeforeUnmount(() => {
//     sessionStorage.setItem('store', JSON.stringify(store.state));
// });


// 退出登录
const logout = () => {
    store.dispatch("logout");
    // ElMessage.success("退出成功");
}

const popoverDisplay = ref("none");
const isPopoverShow = ref(false);
// 搜索框
// const isShowSearchInput = ref(true);
// 搜索框气泡
const isSearchPopShow = ref(false);
// 搜索框内容
const searchInput = ref("");
const searchForm = ref(null); // 输入框元素
const searchPop = ref(null); // 气泡框元素

// 定义 props
const props = defineProps({
    // 是否是固钉导航栏
    isFixHeaderBar: {
        type: Boolean,
        default: false
    },
    // 是否显示搜索输入框
    isShowSearchInput: {
        type: Boolean,
        default: true
    }
});

// 登录对话框
const dialogVisible = ref(false);

// watch(
//     () => store.state.openLogin,
//     (curr) => {
//         if (curr) {
//             dialogVisible.value = true;
//         }
//     }
// );

watch(() => store.state.openLogin, (newValue, oldValue) => {
    if (newValue) {
        dialogVisible.value = true;
    }
});

// 监听点击事件
onMounted(() => {
    window.addEventListener('click', handleOutsideClick);
    // 从localStorage中加载搜索历史
    loadFromLocalStorage();
});

// 在组件卸载时移除监听器
onUnmounted(() => {
    window.removeEventListener('click', handleOutsideClick);
});

/* 功能未开放 */
function noPage() {
    ElMessage.warning("该功能暂未开放");
}

// 悬浮头像时，气泡的显隐
function handleMouseEnter() {
    popoverDisplay.value = "";
    isPopoverShow.value = true;
}

function handleMouseLeave() {
    isPopoverShow.value = false;
    popoverDisplay.value = "none";
}

/* 搜索 */
const goSearch = () => {
    searchPopHide();
    let input = searchInput.value.trim();
    const index = histories.value.indexOf(input);
    if (index != -1) {
        // 值已存在，移除该值
        histories.value.splice(index, 1);
    }
    histories.value.unshift(input);  // 在列表开头插入新记录
    saveToLocalStorage();
    searchInput.value = "";
    if (input === "") {
        // 输入空白符跳转搜索首页
        openNewPage("/search");
        console.log("跳转到搜索首页");
    } else {
        // 否则就跳搜索详情页
        openNewPage(`/search/video?keyword=${input}`);
        console.log("跳转到搜索详情页");
    }
}

// 显示搜索气泡框
const searchPopShow = () => {
    isSearchPopShow.value = true;
    // this.getMatchingWord();
    console.log("显示热搜框: ", isSearchPopShow.value);
}

// 隐藏搜索气泡框
const searchPopHide = () => {
    isSearchPopShow.value = false;
    console.log("隐藏热搜框: ", isSearchPopShow.value);
}

// 点击搜索框和气泡框外的空白处关闭气泡
const handleOutsideClick = (event) => {
    if (
        !searchForm.value.contains(event.target)
        && !searchPop.value.contains(event.target)
    ) {
        isSearchPopShow.value = false;
    }
}

const histories = ref([]);

// 将搜索历史存到localStorage
const saveToLocalStorage = () => {
    localStorage.setItem("historiesSearch", JSON.stringify(histories.value));
}

// 从localStorage中加载搜索历史
const loadFromLocalStorage = () => {
    const storedList = localStorage.getItem("historiesSearch");
    // console.log("浏览器中的搜索历史: ", storedList);
    if (storedList) {
        histories.value = JSON.parse(storedList);
    }
}

// 在输入框按下回车的回调
const onSubmit = (e) => {
    // console.log(e);
    if (e.key === 'Enter') {
        goSearch();
    }
}

// 删除单个搜索历史
const removeHistory = (index) => {
    histories.value.splice(index, 1);
    saveToLocalStorage();
}

// 清空全部搜索历史
const removeAllHistories = () => {
    histories.value = [];
    localStorage.removeItem("historiesSearch");
}

// 点击条目搜索
const clickItemToSearch = (value) => {
    searchInput.value = value;
    goSearch();
}

const router = useRouter(); // 使用 useRouter() 获取路由实例

// 打开新标签页
const openNewPage = (route) => {
    const resolvedRoute = router.resolve(route); // 使用 resolve 方法获取路由的 URL
    window.open(resolvedRoute.href, '_blank'); // 在新标签页中打开 URL
};


const isHistoryOpen = ref(false);


</script>

<style scoped>
/* 主 */
.header-bar {
    box-sizing: border-box;
    /* 让内边距不增加宽度 */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
}

/* 添加背景透明阴影, 从上到下逐渐减弱 */
.header-bar:not(.slide-down)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    /* 上到下渐变透明 */
}

/* 左边 */
.left-entry {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /*容器空间不足时不缩小，即固定大小*/
    margin-right: 20px;
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-weight: 400;
    font-style: normal;
    line-height: 1.25;
}

/* 标题 */
.entry-title {
    display: flex;
    align-items: center;
}

.default-entry span {
    display: inline-block;
    position: relative;
}

.entry-title,
.default-entry,
.download-entry {
    height: 64px;
    line-height: 64px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin-right: 15px;
    color: white;
}

/* logo */
.logo {
    height: 40%;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.logo img {
    height: 100%;
}

/* 箭头 */
.entry-title .icon-xiajiantou {
    transition: transform .3s;
    transform: rotate(0);
    font-weight: 600;
}

.icon-dsj {
    margin-bottom: 2px;
}

.icon-dsj,
.icon-a-download {
    margin-right: 8px;
}

/* 右边 */
.right-entry {
    display: flex;
    align-items: center;
    margin-left: 20px;
    flex-shrink: 0;
    /*容器空间不足时不缩小，即固定大小*/
}

/* 头像 */
.header-avatar-wrap {
    position: relative;
    box-sizing: content-box;
    padding-right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

/* 未登录 */
.default-login {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 2;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: skyblue;
    text-align: center;
    line-height: 38px;
    color: rgba(255, 255, 255, 0.9);
}

/* 登录头像 */
.header-avatar-wrap--container {
    position: relative;
    z-index: 2;
}

.mini-avatar--small {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 2;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-sizing: border-box;
    /* 让内边距不增加宽度 */
    border: 2px solid #fff;
    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
    /* 添加平滑过渡效果 */
}

.v-img {
    position: relative;
    display: inline-block;
    line-height: 1;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 50%;
    background-color: transparent;

}

/* 鼠标悬浮时放大头像 */
.header-avatar-wrap:hover .mini-avatar--small {
    top: 15px;
    left: -35px;
    width: 90px;
    height: 90px;
}

.header-avatar-wrap:hover .mini-avatar--small.shrink {
    animation: shrink 0.3s both;
    /* 初始状态为缩小 */
}

@keyframes shrink {
    to {
        transform: scale(1);
        /* 缩小到原始大小 */
    }
}

.v-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: inherit;
    border-radius: 50%;
    image-rendering: -webkit-optimize-contrast;
}

/* 用户头像弹出框 */
.v-popover {
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    margin-left: -20px;
    cursor: default;
}

.to-bottom {
    top: 100%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    /* 水平左移半个元素身位，使其水平与父元素居中 */
}

.avatar-panel-popover {
    width: 300px;
    background-color: #fff;
    border-radius: 8px;
    padding: 0 24px 18px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    border: 1px solid #E3E5E7;
}

.popHide {
    animation: fade-out 0.2s ease-out forwards;
    transform-origin: top;
    /* 设置动画的旋转点为顶部 */
}

.popShow {
    animation: fade-in 0.2s ease-out forwards;
    transform-origin: top;
    /* 设置动画的旋转点为顶部 */
}

/* 淡入动画 */
@keyframes fade-in {
    0% {
        opacity: 0;
        /* 初始状态透明 */
        transform: translateY(-10px);
        /* 向上平移 10px，将元素隐藏在顶部 */
    }

    100% {
        opacity: 1;
        /* 最终状态不透明 */
        transform: translateY(0);
        /* 平移恢复到原始位置 */
    }
}

/* 淡出动画 */
@keyframes fade-out {
    0% {
        opacity: 1;
        /* 初始状态不透明 */
        transform: translateY(0);
        /* 原始位置 */
    }

    100% {
        opacity: 0;
        /* 最终状态透明 */
        transform: translateY(-10px);
        /* 向上平移 10px，将元素隐藏在顶部 */
    }
}

/* 用户名 */
.nickname {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 6px;
    font-size: 18px;
    color: #18191C;
    text-decoration: none;
    /* 去除下划线 */
}

.vip-name {
    color: #fb7299;
}

/* vip */
.vip-level-tag {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vip-tag {
    display: inline-block;
    box-sizing: border-box;
    max-width: 58px;
    height: 16px;
    color: #fff;
    background: #FF6699;
    border-radius: 2px;
    line-height: 16px;
    font-size: 10px;
    padding: 0 3px;
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 400;
    cursor: pointer;
}

.gender {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.female {
    background-color: #FFD9E4;
    ;
    color: #FF6699;
}

.male {
    background-color: #BFEDFA;
    color: #00AEEC;
}

.vip-level-tag .iconfont {
    font-size: 12px;
    margin-right: 10px;
    line-height: 14px;
}

/* 硬币 */
.coins {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin: 6px 0;
}

.coins-text {
    margin-right: 5px;
    color: #9499A0;
}

.coins-num {
    color: #18191C;
}

/* 关注、粉丝、动态 */
.counts {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin: 6px 0 12px 0;
}

.counts-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: fit-content;
    text-decoration: none;
}

.count-num {
    font-size: 18px;
    color: #222222;
    transition: 0.3s;
}

.count-text {
    font-size: 12px;
    color: #9499A0;
    margin-top: 2px;
    transition: 0.3s;
}

.counts-item:hover .count-num,
.counts-item:hover .count-text {
    color: #40C5F1;
}

/* 菜单 */
.single-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 38px;
    border-radius: 8px;
    color: #61666D;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .3s;
    margin-bottom: 2px;
}

.single-item:hover {
    background-color: #F1F2F3;
}

.single-item-left {
    display: flex;
    align-items: center;
}

.single-item span {
    line-height: 14px;
    margin-left: 10px;
}

/* 分割线 */
.placeholder {
    margin: 6px 0 12px 0;
    border-bottom: 1px solid #ddd;
}

/* 退出登录 */
.logout {
    display: flex;
    justify-content: initial !important;
}

/* 右边图标 */
.right-entry--outside {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-shrink: 0;
    margin-right: 0;
    min-width: 50px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.right-entry--outside .iconfont {
    color: white;
    font-size: 20px;
    display: inline-block;
    position: relative;
}

/* 投稿 */
.right-entry-item--upload {
    margin-left: 15px;
}

.icon-shangchuan {
    margin-right: 5px;
}

.upload-buttom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    width: 90px;
    height: 34px;
    border-radius: 8px;
    background: #fb7299;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 34px;
    cursor: pointer;
    transition: background-color .3s;
}

.upload-buttom:hover {
    background-color: #f992af;
}

/* 固定顶部导航栏 */
.slide-down {
    position: fixed;
    top: 0;
    left: unset;
    animation: headerSlideDown .3s linear forwards;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    background: var(--bg1_float);
}

.slide-down .entry-title,
.slide-down .default-entry,
.slide-down .download-entry {
    color: var(--text1);
}

.slide-down .right-entry--outside .iconfont {
    color: var(--text1);
}

.slide-down .right-entry--outside {
    color: var(--text2);
}

/* 跳动效果 */
@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
        /* 起始和结束状态，图标回到原位 */
    }

    50% {
        transform: translateY(-5px);
        /* 中间状态，图标向上跳动 20px */
    }
}

.default-entry:hover span,
.right-entry--outside:hover .iconfont {
    animation: jump 0.3s;
    /* 应用跳动动画效果 */
}

/* 中间 */
/* 搜索框 */
.center-search-container {
    flex: 1 auto;
    /* 宽度占80% 居中*/
    height: 40px;
    /* border: 1px solid pink; */
}

/* 搜索框被选中时 */
.center-search-container .is-focus {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    border-radius: 8px;
}

/* 输入框 */
.header-bar .center-search-container .center-search__bar {
    position: relative;
    margin: 0 auto;
    min-width: 181px;
    max-width: 500px;
}

.is-focus #nav-searchform {
    background-color: #fff;
    border-bottom: none;
}

#nav-searchform {
    display: flex;
    align-items: center;
    padding: 0 48px 0 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--line_regular);
    height: 40px;
    border-radius: 8px;
    background-color: var(--graph_bg_regular);
    opacity: .9;
    transition: background-color .3s;
}

.nav-searchform-active {
    transition: background-color 0s !important;
    border-radius: 8px 8px 0 0 !important;
}

#nav-searchform:hover {
    background-color: #fff;
    opacity: 1;
}

/* 文本框 */
.nav-search-content {
    flex: 1;
}

.nav-search-input :deep() .el-input__wrapper {
    background-color: #FFFFFF00;
    border-radius: 6px;
    box-shadow: none;
    padding: 1px 30px 1px 11px;
}

.nav-search-input-active :deep() .el-input__wrapper {
    background-color: #0000001A;
}

.nav-search-input :deep() .el-input__inner {
    color: #61666D;
}

.nav-search-input :deep() .el-input__inner:focus {
    color: #18191C;
}

/* 搜索框清空 */
.nav-search-clean {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 55px;
    cursor: pointer;
    color: #C9CCD0;
}

.nav-search-clean:hover {
    color: #61666D;
}

/* 搜索按钮 */
.nav-search-btn {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text1);
    line-height: 32px;
    cursor: pointer;
    transition: background-color .3s;
}

.nav-search-btn:hover {
    background-color: var(--graph_bg_thick);
}

.icon-sousuo {
    font-size: 18px;
}

/* 搜索气泡框 */
.header-bar .search-panel {
    width: 100%;
    max-height: 612px;
    overflow-y: auto;
    background: var(--bg1);
    border: 1px solid var(--line_regular);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 13px 0 16px;
    -webkit-font-smoothing: antialiased;
}

/* 搜索历史 */
/* 头 */
.header-bar .history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.header-bar .history-header .title {
    height: 24px;
    font-size: 16px;
    line-height: 24px;
}

.header-bar .history-header .clear {
    font-size: 12px;
    line-height: 15px;
    height: 15px;
    color: #9499A0;
    cursor: pointer;
}

.header-bar .header .clear:hover {
    color: #61666D;
}

/* 搜索历史 */
.header-bar .histories-wrap {
    padding: 0 16px;
    overflow: hidden;
}

.header-bar .histories {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-right: -10px;
    margin-bottom: 4px;
}

.header-bar .histories .history-item {
    position: relative;
    box-sizing: border-box;
    height: 30px;
    padding: 7px 10px 8px;
    font-size: 12px;
    line-height: 15px;
    background: var(--graph_bg_thin);
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.header-bar .histories .history-item .history-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
    color: var(--text2);
}

.header-bar .histories .history-item .history-text:hover {
    color: var(--brand_pink);
}

/* 删除历史 */
.header-bar .histories .history-item .close {
    display: none;
    box-sizing: border-box;
    position: absolute;
    width: 13px;
    height: 13px;
    top: -6px;
    right: -3px;
    padding: 2px;
}

.header-bar .histories .history-item:hover .close {
    display: block;
}

.header-bar .histories .history-item .close i {
    font-size: 10px;
    color: #fff;
    background-color: #ccc;
    border-radius: 50%;
}

/* 收起展开 */
.header-bar .history-fold {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    margin: 0 auto 14px;
    color: #9499A0;
    cursor: pointer;
}

.header-bar .history-fold:hover {
    color: #FF6699;
}

.header-bar .fold-text {
    font-size: 12px;
    line-height: 15px;
    height: 15px;
}

/* 热搜 */
.header-bar .trendings-double {
    display: flex;

}

.header-bar .trendings-double .trendings-col {
    flex: 1;
}

.header-bar .trendings-double .trendings-col:first-child {
    margin-right: 10px;
}

.header-bar .trending-wrap {
    box-sizing: border-box;
    height: 38px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-left: 16px;
}

.header-bar .trending-item:hover {
    background-color: var(--graph_bg_thick);
}

.header-bar .trending-item .trendings-rank {
    margin-right: 10px;
    color: var(--text3);
}

.header-bar .trending-item .topThree {
    color: var(--text2) !important;
}

.header-bar .trending-item .trendings-text {
    font-size: 14px;
    line-height: 17px;
    height: 17px;
    margin-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
    color: var(--text2);
}

.header-bar .trending-item .trending-mark {
    height: 14px;
    margin-right: 16px;
}

@media (max-width: 1279.9px) {
    .right-entry--outside {
        margin: 0 5px;
        min-width: 25px;
    }

    .upload-buttom {
        width: 34px;
        height: 34px;
        margin-left: 0;
    }

    .icon-shangchuan {
        margin-right: 0;
    }

    .right-entry--outside span,
    .upload-buttom span {
        display: none;
    }

    .red-num--dynamic {
        left: 17px;
    }
}

.header-bar .header .title {
    height: 24px;
    font-size: 16px;
    line-height: 24px;
}
</style>